import * as React from "react"
import { observer, inject } from "mobx-react"
import { View, TouchableWithoutFeedback, Text } from "react-native"
import { Screen } from "../../components/screen"
import { color } from "../../theme"
import { px2dp } from "../../utils"
import AuthScreen from "./AuthScreen"
import NormalScreen from "./NormalScreen"

interface MineScreenProps {
  rootStore: any
  history?: any
}

interface MineScreenState {
  show: boolean
}

@inject("rootStore")
@observer
export class MineScreen extends React.Component<MineScreenProps, MineScreenState> {
  state = {
    show: false,
    visibleModal: false
  }

  componentDidMount() {
    const { globalStore, mineStore } = this.props.rootStore
    if (globalStore.isLogin) {
      mineStore.getInfo()
    }
  }

  showModalVisible = () => {
    this.setState({
      show: true
    })
  }

  closeModal = () => {
    this.setState({
      show: false
    })
  }

  toSecurityCenter = (navigation: any) => {
    const globalStore = this.props.rootStore.globalStore
    if (globalStore.isLogin) {
      // navigation.navigate("SecurityCenter")
    } else {
      this.setState({
        show: true
      })
    }
  }

  render() {
    const globalStore = this.props.rootStore.globalStore
    return (
      <Screen
        preset="scroll"
        testId="mineScreen"
        style={{ backgroundColor: color.palette.lighterGrey }}
      >
        {!globalStore.isLogin ? (
          <View
            style={{
              flexDirection: "row",
              backgroundColor: color.palette.black,
              height: px2dp(75),
              alignItems: "center",
              paddingLeft: px2dp(30)
            }}
          >
            <TouchableWithoutFeedback onPress={() => this.props.history.push("/login")}>
              <View style={{ flexDirection: "row" }}>
                <Text style={{ color: "#fff" }}>登录</Text>
                <Text style={{ color: "#fff" }}>/</Text>
                <Text style={{ color: "#fff" }}>注册</Text>
              </View>
            </TouchableWithoutFeedback>
          </View>
        ) : null}
        <AuthScreen {...this.props} />
        <NormalScreen {...this.props} />
      </Screen>
    )
  }
}

export default MineScreen
